<template>
  <div class="node-panel">
    <div class="panel-header">
      <h3>节点库</h3>
    </div>
    <div class="panel-body">
      <div
        v-for="nodeType in nodeTypes"
        :key="nodeType.type"
        class="node-item"
        draggable="true"
        @dragstart="onDragStart($event, nodeType)"
      >
        <div class="node-icon" :style="{ backgroundColor: nodeType.color }">
          <el-icon :size="24">
            <component :is="nodeType.icon" />
          </el-icon>
        </div>
        <div class="node-info">
          <div class="node-label">{{ nodeType.label }}</div>
          <div class="node-description">{{ nodeType.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAllNodeTypes } from './nodeTypes'

const nodeTypes = ref(getAllNodeTypes())

const onDragStart = (event, nodeType) => {
  event.dataTransfer.setData('application/vueflow', JSON.stringify(nodeType))
  event.dataTransfer.effectAllowed = 'move'
}
</script>

<style lang="scss" scoped>
.node-panel {
  width: 260px;
  height: 100%;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;

  .panel-header {
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .panel-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    .node-item {
      display: flex;
      align-items: center;
      padding: 12px;
      margin-bottom: 12px;
      background: #f5f7fa;
      border-radius: 8px;
      cursor: move;
      transition: all 0.3s;

      &:hover {
        background: #e4e7ed;
        transform: translateX(4px);
      }

      .node-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .node-info {
        flex: 1;
        min-width: 0;

        .node-label {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
        }

        .node-description {
          font-size: 12px;
          color: #909399;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
